<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <meta name="author" content="林镭特" />
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h1>工资计算器</h1>
      <label>总工资：<input type="text" v-model="wages" id="" /></label> <br />

      <tax-div :mywage="wages"></tax-div>
    </div>

    <script id="tax-div" type="text/html">

          <div>
          <template  v-if="mywage>6150">
            <span>养老保险：8%</span>    <span>￥{{shui.Pension}}</span> <br>
        <span>医疗保险：2%</span>      <span>￥{{shui.yiliao}}</span>   <br>
        <span>失业保险：0.5%</span>         <span>￥{{shui.shiye}}</span>  <br>
        <span>生育保险：0%</span>       <span>￥0</span>  <br>
        <span>工伤保险：0%</span>          <span>￥0</span>   <br>
        <span>住房公积金：8%</span>        <span>￥{{shui.Pension}}</span>   <br>
        <p>个人税：{{shui.geshui}}</p>
        <p>税前工资:{{shui.kouchusanxian}}</p>
        <p  >税后工资:{{shui.kouchusanxian-shui.geshui}}</p>
          </template>
          <template v-else>
            <div>工资低于6150不用交税</div>
          </template>
      </div>
    </script>

    <script>
      let app = new Vue({
        el: "#app",
        data: {
          wages: "0",
        },
        components: {
          "tax-div": {
            template: "#tax-div",
            props: ["mywage"],
            data() {
              return {
               
              };
            },

            computed: {
              shui() {
                var gongzi = this.mywage;
                var jizhun;
                if (gongzi > 7662) {
                  jizhun = 7662;
                } else {
                  jizhun = gongzi;
                }

                var Pension = jizhun * 0.08;
                var yiliao = jizhun * 0.02;
                var shiye = jizhun * 0.005;

                var sanxian = jizhun * (0.08 + 0.02 + 0.005 + 0.08);
                // 4.扣除三一金后的月收入
                var kouchusanxian = gongzi - sanxian;
                // 5.应纳税所得额
                var suodee = kouchusanxian - 5000;
                // 6.税率 速算扣除数
                var shuilv, sukou;
                if (suodee <= 0) {
                  return {
                    geshui: "您还未达到缴税标准，请回家涨涨工资再来！",
                  };
                } else {
                  if (suodee <= 3000) {
                    shuilv = 0.03;
                    sukou = 0;
                  } else if (suodee <= 12000) {
                    shuilv = 0.1;
                    sukou = 210;
                  } else if (suodee <= 25000) {
                    shuilv = 0.2;
                    sukou = 1410;
                  } else if (suodee <= 35000) {
                    shuilv = 0.25;
                    sukou = 2660;
                  } else if (suodee <= 55000) {
                    shuilv = 0.3;
                    sukou = 4410;
                  } else if (suodee <= 80000) {
                    shuilv = 0.35;
                    sukou = 7160;
                  } else {
                    shuilv = 0.45;
                    sukou = 15160;
                  }
                  // 7.个人所得税
                  var shuihou = (kouchusanxian - geshui) * 1;
                  var geshui = (suodee * shuilv - sukou).toFixed(2)*1;
                  return {
                    geshui: geshui,
                    Pension: Pension,
                    yiliao: yiliao,
                    shiye: shiye,
                    kouchusanxian: kouchusanxian,
                  };
                }
              },
            },
          },
        },
      });
    </script>
  </body>
</html>
